<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      empty-text="您还没有订阅职位"
      @row-click="getDetails"
    >
      <el-table-column prop="keywords" label="已订阅"></el-table-column>
      <el-table-column width="50" style="text-align:center">
        <el-button
          type="danger"
          icon="el-icon-minus"
          size="mini"
          circle
          @click="dialogVisible = true"
        ></el-button>
      </el-table-column>
    </el-table>

    <Pagination :total="total" @getCurrentData="pageChange" @getSizeData="pageSizeChange" />

    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" center="center">
      <span>确定删除该订阅</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="deleteSub" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/SubPagination";
import { requestUserSubList } from "@/api/index";
import { requestDeleteSub } from "@/api/index";

export default {
  name: "UserSubscribe",
  components: {
    Pagination: pagination
  },

  data() {
    return {
      tableData: [],
      search_type: "username",
      search: "",
      total: 0,
      page: 1,
      page_size: 10,
      hash_key: "",
      dialogVisible: false,
      center: true
    };
  },

  methods: {
    pageChange: function(val) {
      let vue = this;
      vue.page = val;
      vue.requestSubList();
    },
    pageSizeChange: function(val) {
      this.page_size = val;
      this.requestSubList();
    },
    requestSubList: function() {
      let vue = this;

      if (vue.search == "" || JSON.stringify(vue.search) == undefined) {
        vue.$message.error("无法识别用户");
      } else {
        let send_data = {
          open_id: vue.search,
          page: vue.page,
          size: vue.page_size
        };
        requestUserSubList(send_data).then(data => {
          vue.tableData = data.result.SubList;
          vue.total = data.result.totalElements;
          console.log(data);
        });
      }
    },

    getDetails: function(row) {
      this.hash_key = row.hash_key;
      console.log(row.hash_key);
    },

    deleteSub: function() {
      let vue = this;
      let send_data = {
        username: vue.$route.query.open_id,
        hash_key: vue.hash_key
      };
      this.dialogVisible = false;
      requestDeleteSub(send_data).then(data => {
        console.log(data);
      });
    }
  },

  created: function() {
    let vue = this;

    vue.search = vue.$route.query.open_id;

    vue.requestSubList();
  }
};
</script>

<style>
.el-table {
  margin-top: 20px;
}

.el-table__header th {
  text-align: center;
  font-size: 18px;
  color: black;
}
</style>